<template>
  <div direction="vertical">
    <top-panel :data="dashboard.count" />

    <t-row :gutter="16">
      <t-col :xs="12" :xl="9">
        <article-chart ref="articleChartRef"></article-chart>
      </t-col>
      <t-col :xs="12" :xl="3">
        <tag-rank :data="dashboard.tagRank"></tag-rank>
      </t-col>
      <t-col :xs="12" :xl="6">
        <category-chart ref="categoryChartRef"></category-chart>
      </t-col>
      <t-col :xs="12" :xl="6">
        <article-rank :data="dashboard.hotArticle"></article-rank>
      </t-col>
    </t-row>
  </div>
</template>

<script lang="ts">
export default {
  name: 'DashboardBase',
};
</script>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

import $api from '@/api';

import ArticleChart from './components/ArticleChart.vue';
import ArticleRank from './components/ArticleRank.vue';
import CategoryChart from './components/CategoryChart.vue';
import TagRank from './components/TagRank.vue';
import TopPanel from './components/TopPanel.vue';
import { DASHBOARD_DATA, DashboardType } from './constants';

const dashboard = ref<DashboardType>({ ...DASHBOARD_DATA });
const categoryChartRef = ref();
const articleChartRef = ref();
const getCount = async () => {
  dashboard.value = await $api.common.dashboard();

  const categoryCount = dashboard.value.categoryCount
    .filter((v: Recordable) => v.contentCount > 0)
    .map((v: Recordable) => {
      return {
        name: v.categoryName,
        value: v.contentCount,
      };
    });
  categoryChartRef.value.render(categoryCount);

  const xData = dashboard.value.clickCount.map((v: Recordable) => v.date);
  const yData = dashboard.value.clickCount.map((v: Recordable) => v.count);
  articleChartRef.value.render(xData, yData);
};

onMounted(() => {
  getCount();
});
</script>

<style scoped>
.t-col {
  margin-top: 16px;
}
</style>
